<template>
    <div class="type-list">
        <img src="./img/back.png"
             alt=""
             @click="$router.replace('/')"
             style="position: fixed;top: 20px;left: 20px;" />
        <img src="./img/icon-upload.png"
             style="position: fixed;top: 0.8rem;right: 1.5rem;width:7rem;"
             @click="$router.push('upload')" />
        <div class="btn-group">
            <router-link :to="'trade-list/0/0'"
                         tag="div">
                <img src="./img/btn-1-bg.png"
                     alt="">
            </router-link>
            <router-link :to="'trade-list/1/0'"
                         tag="div">
                <img src="./img/btn-2-bg.png"
                     alt="">
            </router-link>
            <router-link :to="'trade-list/2/0'"
                         tag="div">
                <img src="./img/btn-3-bg.png"
                     alt="">
            </router-link>
            <router-link :to="'trade-list/3/0'"
                         tag="div">
                <img src="./img/btn-4-bg.png"
                     alt="">
            </router-link>
            <router-link :to="'trade-list/4/0'"
                         tag="div">
                <img src="./img/btn-5-bg.png"
                     alt="">
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: "type-list"
}
</script>

<style scoped lang="less">
.type-list {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    background: url('./img/bg.jpg') center center;
    background-size: 100% 100%;
    > .btn-group {
        width: 100%;
        > div {
            width: 50%;
            margin: 10px auto;
            img {
                width: 100%;
            }
        }
    }
}
</style>
